<template>
	<view class="pageAll">
		<!-- <view class="pageTop">
			<view class="page-top-view">
				<image :src="labelRouge"></image>
			</view>
			<view class="page-top-view">
				<text>{{slogen}}</text>
			</view>
		</view> -->
		<view>
			<view class="formView">
				<form>
					<view class="formViewInput">
						<input type="number" v-model="form.tel" placeholder="请输入手机号码" placeholder-style="color:#b57979" />
					</view>
					<view class="formViewInputVer">
						<input class="verificaInput" v-model="form.verCode" type="number" placeholder="请输入验证码" placeholder-style="color:#b57979" />
						<button @click="getVerificationCode" class="verifica">{{verBtnStr}}</button>
					</view>
					<view class="formViewInput">
						<input type="text" password v-model="form.password" placeholder="请输入新登录密码" placeholder-style="color:#b57979" />
					</view>
					<view class="formViewInput">
						<input type="text" password v-model="form.rePassword" placeholder="请确认新登录密码" placeholder-style="color:#b57979" />
					</view>
					<view class="submitView">
						<button @click="submit" hover-class="subActive">
							重置密码
						</button>
					</view>
				</form>
			</view>
		</view>
		<logo class="Bottomlogo"></logo>
	</view>
</template>

<script>
	import {
		HBValidate
	} from '../../../utils/tools.js'
	import logo from '../../../components/logo/bottomLogo.vue'
	let interval = null
	export default {
		data() {
			return {
				labelRouge: require('../../../static/index/labelRouge.png'), // 标语图片
				slogen: '标语的位置',
				form: {
					tel: null,
					verCode: null,
					password: null,
					rePassword: null,
				}, // 表单
				verBtnStr: '获取验证码',
				countdown: 60, // 验证码倒计时
				isWorking: false, // 防止用户多次点击
			}
		},
		methods: {
			//  获取验证码
			getVerificationCode() {
				const validate = new HBValidate()
				if (validate.isPhone(this.form.tel)) {
					if (this.countdown === 60) {
						interval = setInterval(() => {
							this.countdown--
							this.verBtnStr = this.countdown + '后重新获取'
							if (this.countdown === 0) {
								this.countdown = 60;
								this.verBtnStr = '获取验证码'
								clearInterval(interval)
							}
						}, 1000)

						this.$api.code({
								mobile: this.form.tel,
								code_type: 'update_password', //验证码类型(register:注册,update_password:更新密码)
							})
							.then(res => {
								if (res.status) {
									uni.showToast({
										title: '验证码已发送',
										icon: 'none',
									})
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 1500,
									})
								}

							})
					}
				} else {
					uni.showToast({
						title: '手机号码格式错误',
						duration: 2000,
						icon: 'none',
						mask: true
					});
				}
			},
			// 提交表单
			submit(evt) {
				const validate = new HBValidate()
				if (!validate.isPhone(this.form.tel)) {
					uni.showToast({
						title: '手机号码格式错误',
						duration: 2000,
						icon: 'none',
						mask: true
					})
				} else if (!validate.isDigits(this.form.verCode)) {
					uni.showToast({
						title: '验证码格式错误',
						duration: 2000,
						icon: 'none',
						mask: true
					})
				} else if (!validate.isPwd(this.form.password)) {
					uni.showToast({
						title: '登录密码必须为6-12之间的数字或英文字符',
						duration: 2000,
						icon: 'none',
						mask: true
					})
				} else if (!validate.isPwd(this.form.rePassword)) {
					uni.showToast({
						title: '登录密码必须为6-12之间的数字或英文字符',
						duration: 2000,
						icon: 'none',
						mask: true
					})
				} else if (this.form.password !== this.form.rePassword) {
					uni.showToast({
						title: '两次密码不一致',
						duration: 2000,
						icon: 'none',
						mask: true
					})
				} else {
					
					// 防止用户多次点击
					if(this.isWorking) {
						return false
					} else {
						this.isWorking = true
					}
					
					this.$api.updatePassword({
							username: this.form.tel,
							password: this.form.password,
							password_verify: this.form.rePassword,
							code: this.form.verCode,
						})
						.then(res => {
							if (res.status) {
								uni.showToast({
									title: '密码修改成功',
									duration: 1500,
								})
								setTimeout(() => {
									uni.redirectTo({
										url: '../login/login'
									})
								}, 1500)

							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500,
								})
							}
							this.isWorking = false
						})
						.catch(err => {
							this.isWorking = false
						})
				}
			},
		},
		components: {
			logo,
		},
		onLoad(option) {
			if (option.tel) {
				this.$set(this.form, 'tel', option.tel)
			}
		},
		onShareAppMessage: (options) => {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: "红标HONBIAO", // 默认是小程序的名称(可以写slogan等)
				path: '/pages/indexPage/authorization/authorization', // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '/static/index/labelRouge.png', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: (res) => {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: () => {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			return shareObj
		},
	}
</script>

<style scoped>
	.pageAll {
		box-sizing: border-box;
		background-color: #fdf5f3;
		width: 100%;
		height: 100%;
		padding: 0 17upx 0 17upx;
		display: inline-block;
	}

	.pageTop {
		padding-top: 57upx;
		width: 100%;
		text-align: center;
		margin-bottom: 13.33upx;
	}

	.pageTop .page-top-view {
		margin-top: 43.33upx;
	}

	.pageTop image {
		width: 314upx;
		margin: 0 auto;
		height: 142upx;
	}

	.pageTop text {
		font-size: 54upx;
		color: #f72d09;
	}

	.formView {
		margin-top: 13.33upx;
	}

	.formViewInput {
		width: 100%;
		margin-bottom: 13.33upx;
	}

	.formViewInput input {
		border-radius: 12upx;
		background-color: #FFF;
		box-shadow: 0 0 10upx rgba(57, 11, 11, 0.15);
		height: 100upx;
		color: #b57979;
		font-size: 32upx;
		padding: 0 20upx;
	}

	.formViewInputVer {
		display: flex;
		flex-wrap: nowrap;
		margin-bottom: 13.33upx;
	}

	.verificaInput {
		background-color: #FFF;
		box-shadow: 0 0 10upx -3upx #390b0b;
		height: 100upx;
		color: #b57979;
		font-size: 32upx;
		padding: 0 20upx;
		width: 478upx !important;
		border-top-left-radius: 12upx;
		border-bottom-left-radius: 12upx;
	}

	.formViewInputVer .verifica:after {
		border: none;
	}

	.formViewInputVer .verifica {
		border-radius: 0;
		width: 220upx;
		float: right;
		border-top-right-radius: 12upx !important;
		border-bottom-right-radius: 12upx !important;
		font-size: 32upx;
		background-color: #f7533e;
		padding: 0;
		height: 100upx;
		line-height: 100upx;
		color: #FFF;
	}

	.formViewInputVer .verifica:active {
		background-color: #FFC8C7;
	}

	.submitView {
		margin-top: 346.66upx;
	}

	.submitView button:after {
		border: none
	}

	.submitView button {
		font-size: 36upx;
		background-color: #f7533e;
		color: #FFF;
		letter-spacing: 24upx;
		height: 100upx;
		line-height: 100upx;
		text-indent: 24upx;
		font-weight: 600;
	}

	.subActive {
		background-color: #FFC8C7 !important;
	}

	.Bottomlogo {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>
